<template>
  <div style="background-color: #fff;">
    <div class="soure">
      <el-page-header @back="goBack" :content="'《'+ bookDataContent.title+ '》'"></el-page-header>
    </div>
    <el-row :gutter="20" style="margin-left: 0px;margin-right: 0px;border-top:1px solid #eaeefb;">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <div class="container-left">
            <div class="leftcontainer-img">
              <img :src="bookDataContent.img" alt="">
            </div>
            <ul class="leftcontainer">
              <li>名称：{{ '《'+ bookDataContent.title+ '》'}}</li>
              <li>类型：{{bookDataContent.catalog}}</li>
              <li>阅读人数：{{bookDataContent.reading}}</li>
              <li>来源：{{bookDataContent.sub1}}</li>
              <li>出版日期：{{bookDataContent.bytime}}</li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-purple">
          <div class="right-container">
              <h3>内容简介：</h3>
              <h5 class="liyou">推荐理由：{{bookDataContent.tags}}</h5>
              <div class="book-content">{{bookDataContent.sub2}}</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
    data(){
      return {
        bookDataContent: []
      }
    },
    mounted(){
        var that =this
        let index = that.$route.query.index
        let id = that.$route.query.id
        console.log(index)
         let data = {
            rn: 10,
            rn: 10, //返回条数
            key: '0b925a34324bbd8c31915b4288e7141a',
            catalog_id: id
        }
        that.getContentBook(data,index)
    },
    methods:{
      goBack() {
        this.$router.go(-1)
      },
      getContentBook(data,index){
        this.$axios.post('/apiin','/goodbook/query',data).then(res=>{
                    if(res.resultcode == 200){
                        this.bookDataContent = res.result.data[index]
                    }
                 })
      }
    } 
}
</script>

<style >
.container-left{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 24px;
}
  .leftcontainer-img{
    width: 150px;
    height: 200px;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
  }
  .leftcontainer-img img{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .leftcontainer{
    padding: 0;
    margin: 0;
    text-align: left;
  }
  .leftcontainer li{
    list-style:none;
    line-height: 28px;
  }
  .right-container{
    padding-right: 28px;
  }
  .right-container .liyou{
    color: #333;
    text-align: left;
  }
  .right-container .book-content{
    color: #666;
    line-height: 28px;
    text-align: left;
  }
  .soure{
    padding: 24px;
    background-color: #fff;
  }
</style>